<!-- sku表单 -->
<template>
    <el-form :model="skuForm" :rules="skuRules" ref="ruleForm" label-width="90px">
        <el-form-item label="SPU名称">
            <span style="font-size: 16px; font-weight: bold; color: #333;">{{spuName}}</span>
        </el-form-item>
        <el-form-item label="SKU名称" prop="skuName">
            <el-input placeholder="请输入SKU名称" v-model="skuForm.skuName"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)" prop="price">
            <el-input type="number" placeholder="请输入价格(元)" v-model="skuForm.price"></el-input>
        </el-form-item>
        <el-form-item label="重量(千克)" prop="weight">
            <el-input type="number" placeholder="请输入重量(千克)" v-model="skuForm.weight"></el-input>
        </el-form-item>
        <el-form-item label="规格描述">
            <el-input type="textarea" rows="4" placeholder="请输入规格描述" v-model="skuForm.skuDesc" maxlength="200"
                show-word-limit>
            </el-input>
        </el-form-item>

        <el-form-item label="平台属性">
            <el-form label-width="100px" inline>
                <el-form-item :label="attr.attrName" v-for="(attr,index) in attrInfoList" :key="attr.id">
                    <!-- 将服务器需要的两个id收集到遍历的数组中，等到提交数据的时候在整理 -->
                    <el-select v-model="attr.attrIdAndAttrValueId" placeholder="请选择">
                        <el-option :label="attrValue.valueName" :value="`${attrValue.attrId}:${attrValue.id}`"
                            v-for="(attrValue,index) in attr.attrValueList" :key="attrValue.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item label="销售属性">
            <el-form label-width="100px" inline>
                <el-form-item :label="saleAttr.saleAttrName" v-for="(saleAttr,index) in SpuSaleAttrList"
                    :key="saleAttr.id">
                    <el-select v-model="saleAttr.saleIdAndSaleValueId" placeholder="请选择">
                        <el-option :label="saleAttrValue.saleAttrValueName"
                            :value="`${saleAttr.id}:${saleAttrValue.id}`"
                            v-for="(saleAttrValue,idnex) in saleAttr.spuSaleAttrValueList" :key="saleAttrValue.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </el-form-item>

        <el-form-item label="图片列表">
            <el-table :data="spuImageList" border stripe empty-text="暂无数据" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="80px" align="center"></el-table-column>
                <el-table-column label="图片" prop="imgUrl" width="300px" align="center">
                    <template slot-scope="{row,$index}">
                        <img :src="row.imgUrl" alt="row.imgName" style="width: 150px; height: 150px;">
                    </template>
                </el-table-column>
                <el-table-column label="名称" prop="imgName" width="width" align="center">
                </el-table-column>
                <el-table-column label="操作" prop="prop" width="300px" align="center">
                    <template slot-scope="{row,$index}">
                        <el-button v-if="row.isDefault==0" type="primary" size="small" style="width: 100px;"
                            @click="setDefault(row)">设为默认
                        </el-button>
                        <el-button v-else size="small" style="width: 100px;">默认</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-form-item>

        <el-form-item>
            <el-button type="primary" style="margin:10px 10px 0px 0px" @click="saveSku">保存</el-button>
            <el-button @click="cancelForm">取消</el-button>
        </el-form-item>
    </el-form>

</template>
<script>
    export default {
        name: "SkuForm",
        data() {
            return {
                spuName: "", // spu名称
                attrInfoList: [], // 平台属性列表
                SpuSaleAttrList: [], // spu销售属性列表
                spuImageList: [], // spu图片列表
                imageList: [], // 收集图片数据
                skuForm: { // 需要收集的sku数据
                    category3Id: "", // 三级分类id
                    spuId: "", // spuid
                    tmId: "", // 品牌id
                    skuName: "", // sku名称
                    price: "", // 价格
                    weight: "", // 重量
                    skuDesc: "", // 规格描述
                    skuAttrValueList: [ // sku平台属性列表
                        {
                            attrId: 0, // 平台属性id
                            valueId: 0 // 平台属性值id
                        }
                    ],
                    skuSaleAttrValueList: [ // sku销售属性列表
                        {
                            saleAttrId: 0, // 销售属性id
                            saleAttrValueId: 0, // 销售属性值id
                        }
                    ],
                    skuDefaultImg: "", // 默认图片地址
                    skuImageList: [ // sku图片列表
                        {
                            imgName: "", // 图片名称
                            imgUrl: "", // 图片地址
                            isDefault: "", // 图片是否默认
                            spuImgId: "" // 图片的id
                        }
                    ],
                },
                skuRules: { // sku表单的验证规则 | 验证规则的变量名必须和被验证的表单中对应元素一样否则无法进行验证
                    skuName: [ // sku名称
                        { required: true, message: '请输入SkU名称', trigger: 'change' },
                    ],
                    price: [ // 价格
                        { required: true, message: '请输入价格', trigger: 'change' }
                    ],
                    weight: [ // 重量
                        { required: true, message: '请输入重量', trigger: 'change' },
                    ]
                }
            }
        },
        methods: {
            // 初始化数据
            async initSkuData(category1Id, category2Id, category3Id, row) {
                this.spuName = row.spuName // 展示spuName
                // 收集父组件传过来的相关数据
                this.skuForm.category3Id = category3Id
                this.skuForm.spuId = row.id
                this.skuForm.tmId = row.tmId

                // 获取平台属性列表数据
                const attrInfoListResult = await this.$api.attr.reqGetAttrInfoList(category1Id, category2Id, category3Id)
                if (attrInfoListResult.code == 200) {
                    // 由于服务器返回的数据特别多(废数据)展示出来影响页面美观
                    // 业务逻辑：截取服务器返回数据的前三条
                    if (attrInfoListResult.data.length > 3) { // 服务器返回数据超过三条截取前三条赋值
                        this.attrInfoList = attrInfoListResult.data.slice(0, 3)
                    } else { // 服务器返回数据小于等于三条时直接赋值
                        this.attrInfoList = attrInfoListResult.data
                    }
                }

                // 获取spu销售属性列表
                const SpuSaleAttrListResult = await this.$api.spu.reqGetSpuSaleAttrList(row.id)
                if (SpuSaleAttrListResult.code == 200) {
                    this.SpuSaleAttrList = SpuSaleAttrListResult.data
                }

                // 获取获取spu图片列表
                const SpuImageListResult = await this.$api.spu.reqGetSpuImageList(row.id)
                if (SpuImageListResult.code == 200) {
                    const list = SpuImageListResult.data.forEach(item => {
                        item.isDefault = 0 // 遍历服务器数据为每条数据添加变量
                    });
                    this.spuImageList = SpuImageListResult.data
                }
            },
            // table复选框事件
            handleSelectionChange(params) {
                this.imageList = params // 收集图片数据
            },
            // 点击设为默认按钮 | 设为默认图片
            setDefault(row) {
                this.spuImageList.forEach(item => { // 将其他按钮的状态设置为非默认
                    item.isDefault = 0
                })
                row.isDefault = 1 // 将点击的图片设置为默认
                this.skuForm.skuDefaultImg = row.imgUrl // 收集默认图片的地址
            },
            // 保存sku发送请求
            async saveSku() {
                this.$refs.ruleForm.validate(async (success) => {
                    if (success) { // 如果表单验证通过，继续业务逻辑
                        const { attrInfoList, SpuSaleAttrList, imageList, skuForm } = this
                        // 整理参数 || 平台属性 | 销售属性 | 图片列表
                        // 1、平台属性 | 整理原数据：attrInfoList 到 | 表单收集数据：skuForm.skuAttrValueList 中去
                        // 方法一：通过reduce方法
                        // skuForm.skuAttrValueList = attrInfoList.reduce((prev, cur) => { // prev: 初始值，cur:遍历的每个元素
                        //     if (cur.attrIdAndAttrValueId) {
                        //         const [attrId, valueId] = cur.attrIdAndAttrValueId.split(':') // 拆分数据获取attrId, valueId
                        //         const arr = { attrId, valueId } // 将获取的数据放入一个对象中
                        //         prev.push(arr) // 向初始的空对象中添加需要收集的数据
                        //     }
                        //     return prev
                        // }, [])
                        // 方法二：通过forEach方法
                        const arr = []
                        attrInfoList.forEach(item => {
                            if (item.attrIdAndAttrValueId) {
                                const [attrId, valueId] = item.attrIdAndAttrValueId.split(':')
                                const obj = { attrId, valueId }
                                arr.push(obj)
                            }
                        })
                        skuForm.skuAttrValueList = arr

                        // 2、销售属性
                        skuForm.skuSaleAttrValueList = SpuSaleAttrList.reduce((prev, item) => {
                            if (item.saleIdAndSaleValueId) {
                                const [saleAttrId, saleAttrValueId] = item.saleIdAndSaleValueId.split(':')
                                prev.push({ saleAttrId, saleAttrValueId })
                            }
                            return prev
                        }, [])

                        // 3、图片列表
                        skuForm.skuImageList = imageList.map(item => {
                            return {
                                imgName: item.imgName,
                                imgUrl: item.imgUrl,
                                isDefault: item.isDefault,
                                spuImgId: item.id
                            }
                        })

                        // 发送请求
                        const result = await this.$api.spu.reqSaveSku(skuForm)
                        if (result.code == 200) {
                            this.$message({
                                message: '成功添加SKU!',
                                type: 'success'
                            });
                            this.$emit('skuChangeScene', 0) // 通过自定义事件将父组件的页面下半部状态改为默认状态|0
                            // 清除数据
                            // this._data : 当前组件的所有响应式数据
                            // this.$options.data : 当前组件的data函数执行返回的数据都为空
                            Object.assign(this._data, this.$options.data())
                        }
                    } else {
                        return false
                    }
                })
            },
            // 取消表单
            cancelForm() {
                this.$emit('skuChangeScene', 0) // 通过自定义事件将父组件的页面下半部状态改为默认状态|0
                // 清除数据
                // this._data : 当前组件的所有响应式数据
                // this.$options.data : 当前组件的data函数执行返回的数据都为空
                Object.assign(this._data, this.$options.data())
            },

        },
    }
</script>
<style scoped>
</style>